<template>
  <div class="app-container">
    <h1 v-color="color">App 根组件</h1>
    <p v-color="'red'">test</p>
    <button @click="color = 'green'">change color</button>
    <hr />

    <Article>
      <template #title>
        <h3>demo1</h3>
      </template>
      <template #content="scope">
        <h3>demo2-----{{ scope.msg }}</h3>
        <p>{{ scope.user }}</p>
      </template>
      <template #author>
        <h3>demo3</h3>
      </template>
    </Article>
    <hr />

    <div id="box" style="display: none">
      <Left>
        <!-- v-slot的简写是# -->
        <template #default>
          <!-- 默认放到slot中的default下面 -->
          123
        </template>
      </Left>
    </div>
  </div>
</template>

<script>
import Left from "@/components/Left.vue";
import Article from "@/components/Article.vue";

export default {
  data() {
    return {
      color: "blue",
    };
  },
  // 私有自定义指定节点
  directives: {
    // 定义名字为color的自定义指令
    // color:{
    //   // el表示绑定标签的DOM对象
    //     bind(el, binding){
    //       el.style.color = binding.value
    //       // console.log(binding)
    //     },
    //   // DOM更新的时候会触发update函数
    //     update(el , binding){
    //       el.style.color = binding.value
    //     }
    // }
    color(el, binding) {
      el.style.color = binding.value;
    },
  },
  components: {
    Left,
    Article,
  },
};
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
